<div ng-if="flowId && !controller.flow">
  Loading...
</div>

<div ng-if="controller.flow">

  <dl class="dl-horizontal dl-flow">
    <grr-force-refresh refresh-trigger="controller.flow">

      <div ng-if="::controller.flow.value.internal_error">
        <br>
        <dt class="alert-danger danger">Error while Opening</dt>
        <dd>{$ ::controller.flow.value.internal_error.value $}</dd>
        <br><br>
      </div>

      <dt>Name</dt>
      <dd><grr-semantic-value value="::controller.flow.value.name" /></dd>

      <dt>Flow ID</dt>
      <dd><grr-semantic-value value="::controller.flow.value.flow_id" /></dd>

      <dt>Creator</dt>
      <dd><grr-semantic-value value="::controller.flow.value.creator" /></dd>

      <dt>Start Time</dt>
      <dd><grr-timestamp value="controller.flow.value.started_at" /></dd>

      <dt>Last Active</dt>
      <dd><grr-timestamp value="controller.flow.value.last_active_at" /></dd>

      <dt>State</dt>
      <dd><grr-semantic-value value="::controller.flow.value.state" /></dd>
      <br>
    </grr-force-refresh>

    <!-- Don't auto-refresh arguments since they don't change during
         the lifetime of the flow. -->
    <dt>Arguments</dt>
    <dd>
      <grr-semantic-value value="::controller.flow.value.args"
                          ng-if="::controller.flow.value.args">
      </grr-semantic-value>
      <span ng-if="!controller.flow.value.args">-</span>
    </dd>
    <br>

    <dt>Runner Arguments</dt>
    <dd>
      <grr-semantic-value value="::controller.flow.value.runner_args"
                          ng-if="::controller.flow.value.runner_args">
      </grr-semantic-value>
      <span ng-if="!controller.flow.value.runner_args">-</span>
    </dd>
    <br>

    <!-- As context may be UI-heavy, only update it when it actually
         changes. -->
    <grr-force-refresh refresh-trigger="controller.flow.value.context">
      <dt>Context</dt>
      <dd>
        <grr-semantic-value value="::controller.flow.value.context">
        </grr-semantic-value>
        <span ng-if="::!controller.flow.value.context">-</span>
      </dd>
      <br>
    </grr-force-refresh>

    <!-- As state may be UI-heavy, only update it when it actually
         changes. -->
    <grr-force-refresh refresh-trigger="controller.flow.value.state_data">
      <dt>State Data</dt>
      <dd>
        <grr-semantic-value value="::controller.flow.value.state_data">
        </grr-semantic-value>
        <span ng-if="::!controller.flow.value.state_data">-</span>
      </dd>
      <br>
    </grr-force-refresh>
  </dl>

</div>
